<!-- <script>
import { ref } from 'vue'
export default {
  // 1. 选项式
  // data() {
  //   return {
  //     count: 100
  //   }
  // },
  // methods: {
  //   add() {
  //     this.count++
  //   },
  //   cut() {
  //     this.count--
  //   }
  // },
  // 2. 组合式
  setup() {
    // 2.1 计算器功能
    const count = ref(99)
    const add = () => count.value++
    const cut = () => count.value--
    return { count, add, cut }
  }
}
</script> -->

<script setup>
import { ref } from 'vue'
// 2.1 计算器功能
const count = ref(99)
const add = () => count.value++
const cut = () => count.value--

</script>

<template>
  <div>
    <button @click="cut">-</button>
    <span>{{ count }}</span>
    <button @click="add">+</button>
  </div>
</template>

<style scoped></style>
